<!--
 * @Description: 地图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:25:47
-->
<template>
  <div style="height: 100%;">
    <div ref="map" style="height: 100%;"></div>
  </div>
</template>

<script>
import { get } from '@/utils/request';
import { mapMutations } from 'vuex';
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {

    };
  },
  computed: {},
  methods: {
    ...mapMutations(['SET_ED']),
    // 封装加载地图的函数
    loadMap() {
      AMapLoader.load({
        key: "790177fac7c4b577fdf59a24029f4ca8", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          // 创建地图图层
          const map = new AMap.Map(this.$refs.map, {
            pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
            viewMode: '3D', //地图模式
            rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
            pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
            zoom: 17, //初始化地图层级
            rotation: -15, //初始地图顺时针旋转的角度
            zooms: [2, 20], //地图显示的缩放级别范围
            center: [109.89,40.66], //初始地图中心经纬度
            // mapStyle: "amap://styles/normal", //设置地图的显示样式
            terrain: true //开启地形图
          });
          const traffic = new AMap.TileLayer.Traffic({
            autoRefresh: true, //是否自动刷新，默认为false
            interval: 180, //刷新间隔，默认180s
          });
          map.add(traffic); //通过add方法添加图层
          //异步加载控件
          AMap.plugin(['AMap.ToolBar', 'AMap.HawkEye', 'AMap.Geolocation', 'AMap.ControlBar'], function () {
            var toolbar = new AMap.ToolBar({
              position: 'LB'
            }); //缩放工具条实例化
            map.addControl(toolbar); //添加控件
            var HawkEye = new AMap.HawkEye();
            map.addControl(HawkEye);
            var Geolocation = new AMap.Geolocation({
              position: 'R'
            });
            map.addControl(Geolocation);
            var ControlBar = new AMap.ControlBar({
              position: 'RT'
            });
            map.addControl(ControlBar);
          });

        })
        .catch((e) => {
          console.error(e); //加载错误提示
        });
    },
  },
  created() { },
  mounted() {
   
    this.loadMap();
  },
};
</script>
<style scoped></style>